<template>
  <div class="div">
	<div class="login-container">
		<el-card class="login-card" header="请先登录">
			<!-- @submit.native.prevent= ""  监听表单的原生提交事件并阻止默认跳转 -->
		    <el-form @submit.native.prevent="login">
		        <el-form-item label="用户名">
		            <el-input v-model="model.username"></el-input>
		        </el-form-item>
		        <el-form-item label="密码">
		            <el-input v-model="model.password" type="password"></el-input>
		        </el-form-item>
		        <el-form-item>
		            <el-button type="primary" native-type="submit" style="margin-left: 100px;">立即登录</el-button>
		            
		        </el-form-item>
		    </el-form>
		</el-card>
	</div>
    </div>
</template>

<script type="text/javascript">
	export default {
		data(){
			return {
				model: {}
			}
		},
        methods: {
        	async login(){
        		
                // const res = await this.$http.post('/login',this.model)
                
                // 把登录成功 后返回的token 保存到浏览器本地存储中
                // localStorage.token = res.data
                // sessionStorage.token = res.data.token
                this.$router.push('/')
                this.$message({
                	type: 'success',
                	message: '登录成功'
                })
        	}
        }
	}
</script>

<style scoped>
.div {

	position: absolute;
	height: 100%;
	width: 100%;
	top:0;
	left: 0;
	overflow-y: auto;
	color: #fff;
	background: url('http://5b0988e595225.cdn.sohucs.com/q_70,c_zoom,w_640/images/20180606/66b2b4275f36482d8e280b58acc05c3c.gif') no-repeat !important;
	background-size: 100% 100% !important;
}
    * {
    	padding: 0;
    	margin: 0;
    }

	.login-container {
		width: 25rem;	
		margin: 10rem auto;	
	}
	.login-card {
		background-color: rgba(0,0,0,0.5) !important;
	}
	.el-card {
		border: 1px solid rgba(0,0,0,0.2) !important;
			}
	.el-card__header {
		    
		    /*border-bottom: 1px solid rgba(0,0,0,0.8) !important;*/
	}
	.el-form-item__label {
		color: #fff !important;
	}
	.el-input__inner {
		    background-color: rgba(0,0,0,0.5) !important;
		    border: 1px solid rgba(0,0,0,0.2) !important;
	}
    
</style>